import { ValidationRule } from "../../validators/types";

/**
 * 表单项组件属性接口
 * 
 * 定义表单项组件的配置选项和行为
 * 
 * @interface TuiFormItemProps
 * @example
 * const formItemProps: TuiFormItemProps = {
 *   label: '用户名',
 *   required: true,
 *   labelWidth: '80px'
 * };
 */
export interface TuiFormItemProps {
  /**
   * 表单项的id
   */
  id?: string;
  
  /**
   * 表单项的标签文本
   */
  label?: string;
  
  /**
   * 标签宽度，可以是数字(px)或'auto'
   * @default 'auto'
   */
  labelWidth?: string | number;
  
  /**
   * 是否为必填项
   * @default false
   */
  required?: boolean;
  
  /**
   * 错误提示信息
   */
  errorMessage?: string;
}

/**
 * 表单组件属性接口
 * 
 * 定义表单组件的配置选项和行为
 * 
 * @interface TuiFormProps
 * @property {Record<string, any>} model - 表单数据对象，用于双向绑定表单数据
 * @property {Record<string, ValidationRule | ValidationRule[]>} rules - 表单验证规则对象
 * @property {boolean} inline - 是否为行内表单
 * @property {boolean} alignLabels - 是否自动对齐所有表单项的标签宽度
 * @example
 * const formProps: TuiFormProps = {
 *   model: { username: '', password: '' },
 *   rules: { username: [(val: string) => !!val || '用户名不能为空'] },
 *   inline: false
 * };
 */
export interface TuiFormProps {
  /**
   * 表单数据对象，用于双向绑定表单数据
   * 
   * @type {Record<string, any>} - 键为字段名，值为字段值
   */
  model?: Record<string, any>;

  /**
   * 表单验证规则对象
   * 
   * @type {Record<string, ValidationRule | ValidationRule[]>} - 键为字段名，值为验证规则或规则数组
   */
  rules?: Record<string, ValidationRule | ValidationRule[]>;

  /**
   * 是否为行内表单
   * 
   * @type {boolean} - true为行内表单，false为垂直表单
   */
  inline?: boolean;
  
  /**
   * 是否自动对齐所有表单项的标签宽度
   * 
   * @type {boolean} - true为自动对齐，false为默认自动宽度
   */
  alignLabels?: boolean;
}

/**
 * 输入框组件属性接口
 * 
 * 定义输入框组件的配置选项和行为
 * 
 * @interface InputProps
 * @example
 * const inputProps: InputProps = {
 *   modelValue: 'hello',
 *   placeholder: '请输入',
 *   disabled: false
 * };
 */
export interface TuiInputProps {
  /**
   * 输入框的id
   */
  id?: string;
  /**
   * 输入框的name属性
   */
  name?: string;
  /**
   * 输入框的类型，如text, password, email等
   * @default 'text'
   */
  type?: string;
  /**
   * 绑定的值
   */
  modelValue?: string;
  /**
   * 输入框占位符
   */
  placeholder?: string;
  /**
   * 是否禁用输入框
   * @default false
   */
  disabled?: boolean;
  /**
   * 是否必填
   * @default false
   */
  required?: boolean;
  /**
   * 是否只读
   * @default false
   */
  readonly?: boolean;
  /**
   * 最大输入长度
   */
  maxlength?: number;
  /**
   * 最小输入长度
   */
  minlength?: number;
  /**
   * 正则表达式验证
   */
  pattern?: string;
  /**
   * 自动完成功能
   */
  autocomplete?: string;
}

/**
 * 复选框组件属性接口
 * 
 * 定义复选框组件的配置选项和行为
 * 
 * @interface TuiCheckboxProps
 * @example
 * const checkboxProps: TuiCheckboxProps = {
 *   modelValue: false,
 *   label: '选项一',
 *   disabled: false
 * };
 */
export interface TuiCheckboxProps {
  /**
   * 复选框的id
   */
  id?: string;
  /**
   * 复选框的name属性
   */
  name?: string;
  /**
   * 绑定的值
   */
  modelValue?: boolean;
  /**
   * 复选框的标签文本
   */
  label?: string;
  /**
   * 是否禁用
   */
  disabled?: boolean;
  /**
   * 是否必填
   */
  required?: boolean;
  /**
   * 错误信息
   */
  errorMessage?: string;
}

/**
 * 选项组件属性接口
 * 定义选项组件的配置选项和行为
 * @example
 * const optionProps: TuiOptionProps = {
 *   value: '1',
 *   label: '选项一',
 *   disabled: false
 * };
 */
export interface TuiOptionProps {
  /**
   * 选项的值
   */
  value: string | number | object;

  /**
   * 选项的标签文本
   */
  label?: string;

  /**
   * 是否禁用该选项
   */
  disabled?: boolean;

  /**
   * 是否选中该选项
   */
  selected?: boolean;

  /**
   * 自定义类名
   */
  class?: string;
}

/**
 * 数字输入框组件属性接口
 * 
 * 定义数字输入框组件的配置选项和行为
 * 
 * @interface TuiInputNumberProps
 * @example
 * const inputNumberProps: TuiInputNumberProps = {
 *   modelValue: 0,
 *   min: 0,
 *   max: 100,
 *   step: 1
 * };
 */
export interface TuiInputNumberProps {
  /**
   * 输入框的id
   */
  id?: string;
  /**
   * 输入框的name属性
   */
  name?: string;
  /**
   * 绑定的值
   */
  modelValue?: number | null;
  /**
   * 最小值
   * @default Number.MIN_SAFE_INTEGER
   */
  min?: number;
  /**
   * 最大值
   * @default Number.MAX_SAFE_INTEGER
   */
  max?: number;
  /**
   * 步长
   * @default 1
   */
  step?: number;
  /**
   * 是否只能输入步长的倍数
   * @default false
   */
  stepStrictly?: boolean;
  /**
   * 数值精度
   */
  precision?: number;
  /**
   * 输入框尺寸
   */
  size?: 'large' | 'default' | 'small';
  /**
   * 是否禁用
   * @default false
   */
  disabled?: boolean;
  /**
   * 是否使用控制按钮
   * @default true
   */
  controls?: boolean;
  /**
   * 占位符
   */
  placeholder?: string;
  /**
   * 是否只读
   * @default false
   */
  readonly?: boolean;
  /**
   * 错误提示信息
   */
  errorMessage?: string;
  /**
   * 内部输入文本对齐方式
   */
  align?: 'left' | 'center' | 'right';
}
